import React, { useState, useEffect } from "react";
import { reqCatesList, reqCateGoodsList } from "../../http/api";
import { Tabs,  NavBar ,Icon} from "antd-mobile";
import Carde from "../Index/compones/Carde/Carde";
import "./Cate.less";
export default function Cate(props) {
  const [cate, setCate] = useState([]);
  const [cateGoods, setCateGoods] = useState([]);
  useEffect(() => {
    reqCatesList().then((res) => {
      if (res.data.code === 200) {
        setCate(res.data.list);
        reqCateGoodsList({ fid: res.data.list[0].id }).then((res) => {
          if (res.data.code === 200) {
            setCateGoods(res.data.list);
          }
        });
      }
    });
  }, []);
  let tab = cate.map((item) => {
    return {
      title: item.catename,
      key: item.id,
    };
  });

  return (
    <div className="Cate">
      <NavBar  mode="light" icon={<Icon type="left" />} onLeftClick={() => {props.history.go(-1)}} >分类页</NavBar>
      <Tabs
        onChange={(title, key) => {
          console.log(key);
          reqCateGoodsList({ fid: tab[key].key }).then((res) => {
            if (res.data.code === 200) {
              setCateGoods(res.data.list);
            }
          });
        }}
        tabs={tab}
        initialPage={0}
        activeTab={false}
        tabBarPosition="left"
        tabDirection="vertical"
      >
        <div>
          {cateGoods
            ? cateGoods.map((item, index) => {
                return <Carde key={index} list={item} {...props}></Carde>;
              })
            : null}
        </div>
      </Tabs>
    </div>
  );
}
